/**
 * Created by 小敏哥 on 2017/10/23.
 */
import React, {Component} from 'react';
import style from './index.scss';
import SendCxytjMessage from '../../../utils/sendCxytjMessage';

class SliderDownIcon extends Component {
    constructor(props) {
        super(props);
        this.state = {
            mainClass: style.sliderDownIcon
        };
        this.setIconStatus=this.setIconStatus.bind(this);
    }

    setIconStatus(){
        if(document.body.scrollTop>50){
            this.setState({
                mainClass: style.hide
            });
            window.removeEventListener('scroll',this.setIconStatus,false);
        }
    }

    //平滑向下滚动
    sliderDown() {
        let length = 0;
        let interval = window.setInterval(() => {
            if (length > 450) {
                window.clearInterval(interval);
            }
            else {
                length += 30;
                window.scrollTo(0, length);
            }
        }, 10);
        this.setState({
            mainClass: style.hide
        });
        SendCxytjMessage.sendMessage({eventId: 'H5_E_Interspection_Homepage_ClickCheckdetail'});
    }

    componentDidMount() {
        //监听滚动事件
        window.addEventListener('scroll',this.setIconStatus,false);
        setTimeout(()=>{
            this.setState({
                mainClass: style.sliderDownIcon + ' ' + style.show
            })
        },1000);
    }


    render() {
        return <div className={this.state.mainClass} onClick={() => {
            this.sliderDown()
        }}>
            <img src="./images/down.png"/>
            <div>查看详细流程</div>
        </div>
    }
}

export default SliderDownIcon;